<template>
  <view class="login-grzq">
    <view class="shading">
      <image class="imga" :src="logoUrl"/>
      <image class="imgs" :src="logoszqUrl"></image>
    </view>
    <view class="shading_title">
    </view>
    <view class="register_title">
      <view>你好
        <br/>
        欢迎使用国润甄泉
      </view>
    </view>
    <view class="form">
      <view class="inputs_button">
        <view class="inputs">
          <view class="account">
            <input type="number" v-model="account" :adjust-position="false" placeholder="请输入手机号，注册国润甄泉"/>
          </view>
          <view class="password">
            <input type="password" v-model="password" :adjust-position="false" placeholder="请输入密码，注册国润甄泉"/>
          </view>
          <view class="vcode">
            <input type="number" v-model="captcha" :adjust-position="false" placeholder="请输入验证码"/>
            <text style="color:#3264ed"  class="code font-num" :class="disabled === true ? 'on' : ''" :disabled='disabled'
                  @click="getVcode">
              {{ textName }}
            </text>

          </view>
        </view>
        <view class="button">
          <view @click="submit_register"  >  注册 </view>
        </view>
      </view>
    </view>

    <view class="login_register">
      <text @click="forgetPwd">找回账户 </text>
    </view>
  </view>
</template>

<script>
import sendVerifyCode from "@/mixins/SendVerifyCode";
import {phoneRegister, verifyCode, registerVerify} from "@/api/api";
export default {
  mixins: [sendVerifyCode],
  data() {
    return {
      codeName: '获取验证码',
      logoUrl: this.$common.imgUrl() + '/images/logo@2x.png',
      logoszqUrl: this.$common.imgUrl() + '/images/login/szq@2x.png',
      account: "",
      password: "",
      captcha: "",
      pactChecked: false,
    }
  },
  onLoad() {

  },
  methods: {
    async submit_register() {
      let that = this;
      if (!that.account)
        return that.$utils.Tips({
          title: '请填写账号'
        });
      if (!/^[\w\d]{5,16}$/i.test(that.account))
        return that.$utils.Tips({
          title: '请输入正确的账号'
        });
      if (!that.password)
        return that.$utils.Tips({
          title: '请填写密码'
        });
      if (!that.captcha)
        return that.$utils.Tips({
          title: '请输入正确的账号'
        });
      let openid  = that.$Cache.get('OPENID');
      phoneRegister({'openid':openid,'account':that.account,"password":that.password,"captcha":that.captcha}).then(res => {
        that.$store.commit('LOGIN', {
          token: res.data.token,
          time: res.data.expires_time - that.$Cache.time()
        });
        let backUrl = '/pages/index/home';
        let water_role = res.data.user_info.water_role??false;

        that.$store.commit('SETUID', res.data.uid);
        that.$store.commit("UPDATE_USERINFO", res.data.user_info);
        that.$store.commit("UPDATE_USERINFO_ROLE", water_role);
        uni.reLaunch({
          url: backUrl
        });
      })
    },
    // 获取验证码
    async getVcode() {
      let that = this;
      if (!that.account) {
        return that.$utils.Tips({
          title: '请填写手机号码'
        });
      }
      if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account))) {
        return that.$utils.Tips({
          title: '请输入正确的手机号码'
        });
      }
      // 获取验证码
      verifyCode().then(res => {
        registerVerify(that.account, 'reset', res.data.key)
            .then(vres => {
              that.$utils.Tips({
                title: vres.data.message
              });
              that.sendCode();
            }).catch(err => {
          return that.$utils.Tips({
            title: err
          });
        });
      });
    },
    forgetPwd(){
      return this.$utils.Tips({
        title: '请联系客服'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-grzq {
  min-height: 100vh;
  background: url($baseUrl + '/images/bg/login@2x.png') no-repeat top center;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .shading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* #ifdef APP-VUE */
    margin-top: 50rpx;
    /* #endif */
    /* #ifndef APP-VUE */
    margin-top: 160rpx;
    /* #endif */
    .imga {
      width: 200rpx;
      height: 200rpx;
    }
    .imgs{
      width: 282rpx;
      height: 45rpx;
      margin-left: 34rpx;
    }
  }
  .register_title {
    padding: 53rpx;
    view {
      padding-left: 64rpx;
      font-size: 33rpx;
      font-weight: 600;
      color: #383838;
    }
  }

  .title {
    padding-top: 20rpx;
    // padding-bottom: 70rpx;

    view {
      padding-left: 64rpx;
      font-size: 18rpx;
      font-weight: 700;
      color: #949ca8;
    }
  }

  .form {
    flex: 1;
    margin: 0 32rpx;
    border-radius: 40rpx;
    // background-color: #fff;
    overflow: hidden;

    .inputs_button {
      .inputs {
        padding: 24rpx 32rpx 0;
        margin-bottom: 80rpx;

        .account,
        .password,
        .vcode {
          height: 96rpx;
          border-radius: 20rpx;
          padding: 0 48rpx;
          display: flex;
          align-items: center;
          background: url($baseUrl + '/images/login/imput.png') no-repeat top center;

          input {
            flex: 1;
          }
        }

        .account {
          margin-bottom: 48rpx;
        }
        .password {
          margin-bottom: 48rpx;
        }

        .vcode {
          text {
            color: #949ca8 !important;
            border-left: 5rpx solid #888888;
            text-wrap: nowrap;
            font-size: 26rpx;
            padding-left: 48rpx;
            text-wrap: nowrap;
          }
        }
      }
      .codeSwitch{
        height: 50rpx;
        width: 300rpx;
        color: #3264ed;
        image{
          width: 45rpx;
          height: 43rpx;
          padding-right: 2rpx;
        }
        text{
          font-size: 24rpx;
        }

      }
      .button {
        padding: 0 32rpx;

        view {
          line-height: 96rpx;
          border-radius: 20rpx;
          text-align: center;
          font-size: 32rpx;
          background-color: #3264ed;
          color: #fff;
        }
      }
    }

  }

  .login_register {
    padding: 100rpx;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    color: #3264ed;
    font-size: 24rpx;
    text {

    }

    .register_tit {
      padding: 0 75rpx;
    }
  }

  .pact {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 90rpx;
    font-size: 24rpx;

    text {
      color: #3264ed;
    }

    radio {
      :deep(.uni-radio-input) {
        border: 1rpx solid #3264ed;
      }
      transform: scale(0.6)
    }
  }
}
</style>
